<template>
	<view>
		<!-- placeholder 可以防止塌陷 -->
        <u-navbar
			v-if="!isHome"
            :title="title"
            :leftIcon="isChild ? 'arrow-left' : ''"
			:fixed="true"
			:placeholder="true"
			:autoBack="isChild"
        >
        </u-navbar>
		<u-navbar
			v-else
			:fixed="true"
			:placeholder="true"
		>
			<view class="u-nav-slot" slot="left" style="display: flex;">
				<view class="text-neon">
					<u--image src="/static/logo.png" width="210rpx" height="70rpx"></u--image>
				</view>
				<view class="search-view">
					<view class="search" :style="'height:' + searchHeight +'px;'">
						<view @click="toSearch">
							<text class="search-text" 
								:style="'width:' + searchWidth + 'px;' +
								'height:' + searchHeight + 'px;'
								+'line-height:' + searchHeight + 'px;'"
							>
							搜索
							</text>
						</view>
					</view>
				</view>
			</view>
		</u-navbar>
	</view>
</template>

<script>
	import {rpxToPx} from '@/utils/commonUtils.js';
	
	export default {
		data() {
			return {
				searchWidth: Number,
				searchHeight: Number
			}
		},
		props: {
			title: String,
			isHome: false,
			isChild: false
		},
		methods: {
			toSearch() {
				uni.navigateTo({
					url: '/pages/search/search'
				})
			}
		},
		created() {
			// 是否为微信小程序
			let iswx = uni.getSystemInfoSync().uniPlatform === 'mp-weixin';
			// 是微信小程序则获取胶囊宽度
			let menuWidth = iswx ? uni.getMenuButtonBoundingClientRect().width : 0;
			// 计算搜索框宽度
			this.searchWidth = rpxToPx(450) - menuWidth;
			// 计算搜索框宽度。uView 默认为 44px
			this.searchHeight = iswx ? uni.getMenuButtonBoundingClientRect().height : 44;
		}
	}
</script>


<style scoped>
	
	.home-navbar {
		display: flex;
	}
	
	.search {
		background: #f4f4f4;
		border-radius: 200rpx;
		text-align:center;
	}
	
	.search-text {
		display: inline-block;
		margin-left: 30rpx;
		color: #bbbbbb;
		font-size: 26rpx;
		background: url()
			no-repeat left center;
		background-size: 23rpx;
	}

	
</style>